<template>
  <div class="categoriesBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row type="flex">
        <el-col :span="8">
          <el-row type="flex">
            <el-col :span="20">
              <el-button type="primary" @click="add">添加分类</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-table
        v-loading = "isLoading"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="cat_id"
        border
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="index" width="50" label="#"></el-table-column>
        <el-table-column prop="cat_name" label="分类名称" width="">
        </el-table-column>

        <el-table-column prop="cat_deleted" label="是否有效" width="">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-check"
              circle
              v-if="scope.row.cat_deleted"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-close"
              circle
              v-if="scope.row.cat_deleted == false"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="cat_level" label="排序" width="">
          <template slot-scope="scope">
            <el-tag size="mini" type="" v-if="scope.row.cat_level == 0">
              一级
            </el-tag>
            <el-tag size="mini" type="danger" v-if="scope.row.cat_level == 1">
              二级
            </el-tag>
            <el-tag size="mini" type="warning" v-if="scope.row.cat_level == 2">
              三级
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      >
      </el-pagination>
    </el-card>

    <!-- 添加分类 -->
    <el-dialog title="添加商品分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.cat_name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="父级分类" :label-width="formLabelWidth">
          <el-cascader
            :options="options"
            v-model="selectedOptions"
            :props="props"
            @change="selectChange"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑分类名称 -->
    <el-dialog title="修改分类" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="formEdit">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="formEdit.cat_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategories,
  getCategoriesEdit,
  getCategoriesById,
  getCategoriesDelete,
  getAddCategories,
} from "../../api/index";
export default {
  data() {
    return {
      isLoading: true,
      tableData: [],
      totalSize: 0, //总条数
      params: {
        type: "3",
        pagenum: 1,
        pagesize: 5,
      },
      dialogFormVisible: false,
      dialogFormVisibleEdit: false,
      form: {
        cat_name: "",
      },
      formLabelWidth: "120px",
      options: [],
      props: {
        value: "cat_id",
        label: "cat_name",
        checkStrictly: true, //来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
      },
      selectedOptions: [],
      formEdit: {},
      currentItem: {},
    };
  },
  created() {
    this.categoriesList();
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve(treeNode);
      }, 300);
    },
    // 分页功能
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
      this.categoriesList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pagenum = val;
      this.categoriesList();
    },
    async handleEdit(row) {
      this.dialogFormVisibleEdit = true;
      let { data } = await getCategoriesById(row);
      this.formEdit = data;
      // console.log(data)
    },
    // 确认编辑
    async confirmEdit() {
      let res = await getCategoriesEdit(this.formEdit);
      let {
        data,
        meta: { msg, status },
      } = res;
      if (status != 200) return this.$message.error(msg);
      this.categoriesList();
      this.$message.success(msg);
      this.dialogFormVisibleEdit = false;
    },
    async handleDelete(row) {
      try {
        let res = await this.$confirm("是否删除该分类？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        // console.log(res)
        if (res == "confirm") {
          let res = await getCategoriesDelete(row);
          console.log(res);
          let {
            meta: { msg, status },
          } = res;
          if (status == 200) {
            this.$message.success(msg);
            this.categoriesList();
          } else {
            this.$message.warning(msg);
          }
        }
      } catch {
        this.$message.info("取消删除");
      }
    },

    //商品分类列表
    async categoriesList() {
      let res = await getCategories(this.params);
      // console.log(res);
      let {
        data: { pagenum, pagesize, total, result },
        meta: { status, msg },
      } = res;

      if (status != 200) return this.$message.error(msg);
      this.isLoading = false
      this.tableData = result;
      this.totalSize = total;
    },
    async add() {
      this.dialogFormVisible = true;
      let res = await getCategories({ type: "2" });
      let {
        data,
        meta: { status, msg },
      } = res;
      if (status != 200) return this.$message.error(msg);
      this.options = data;
    },
    async confirmAddSubmit() {
      let params = {
        ...this.form,
        cat_pid: this.selectedOptions[0],
        cat_level: this.selectedOptions.length,
      };
      let res = await getAddCategories(params);
      console.log(res);
      // console.log(this.selectedOptions)
      let {
        data,
        meta: { msg, status },
      } = res;
      if (status != 201) return this.$message.error(msg);
      this.categoriesList();
      this.dialogFormVisible = false;
      this.$message.success(msg);

      // data:
      // cat_deleted: false
      // cat_id: 1492
      // cat_level: 2
      // cat_name: "糖"
      // cat_pid: 351
      // [[Prototype]]: Object
      // meta:
      // msg: "创建成功"
      // status: 201
    },
    selectChange() {},
  },
};
</script>

<style>
</style>